<template>
  <div id="components-modal-demo-position">
    <CloudButton type="primary" @click="() => setModal1Visible(true)">
      Display a modal dialog at 20px to Top
    </CloudButton>
    <CloudModal
      title="20px to Top"
      dialog-class="modal-top"
      :visible="modal1Visible"
      @ok="() => setModal1Visible(false)"
      @cancel="() => setModal1Visible(false)"
    >
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
    </CloudModal>
    <br /><br />
    <CloudButton type="primary" @click="() => (modal2Visible = true)">
      Vertically centered modal dialog
    </CloudButton>
    <CloudModal
      :visible="modal2Visible"
      title="Vertically centered modal dialog"
      centered
      @ok="() => (modal2Visible = false)"
      @cancel="() => (modal2Visible = false)"
    >
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
    </CloudModal>
  </div>
</template>
<script>
export default {
  title: '4.自定义位置',
  data() {
    return {
      modal1Visible: false,
      modal2Visible: false,
    };
  },
  methods: {
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible;
    },
  },
};
</script>
<style>
.modal-top {
  top: 20px;
}
</style>